import { ref } from "vue";

export function useVehicleColumns(timeLineArr) {
  const vehicleList = ref([]);
  const vehicleColumns: TableColumnList = [
    {
      label: "车辆",
      prop: "vehicleId",
      slot: "vehicle",
      minWidth: 110
    },
    {
      label: "时间选择",
      prop: "entryStartTime",
      cellRenderer: ({ row }) => (
        <el-select v-model={row.entryTime} clearable placeholder="请选择时间">
          {timeLineArr.value.map(item => {
            return (
              <el-option
                key={item.shortEntryStartTime}
                label={item.shortEntryStartTime}
                value={[item.shortEntryStartTime, item.shortEntryEndTime]}
                disabled={item.entryTimeUsed === true}
              />
            );
          })}
        </el-select>
      ),
      minWidth: 100
    },
    {
      label: "操作",
      fixed: "right",
      width: 90,
      slot: "operation"
    }
  ];
  const selectValue = ref([]);
  function vehicleOnAdd() {
    selectValue.value.push({
      vehicleSelectValue: ""
    });
    vehicleList.value.push({
      did: vehicleList.value.length + 1,
      vehicleId: "",
      entryTime: []
    });
  }

  function vehicleOnDel(row) {
    const index = vehicleList.value.indexOf(row);
    if (index !== -1) {
      vehicleList.value.splice(index, 1);
      selectValue.value.splice(index, 1);
    }
  }

  return {
    vehicleColumns,
    vehicleList,
    vehicleOnAdd,
    vehicleOnDel,
    selectValue
  };
}
